<template>
    <div class="box">
        <div class="head">
            <div class="left">
                <div class="iconfont icon-xiala-copy"></div>
                <div class="iconfont icon-new"></div>
            </div>
            <div class="right">已关注</div>
        </div>
        <div class="title">
            <h3>车组注意了！9月下旬部分李四进行情节抱歉</h3>
        </div>
        <div class="bao">火星时报<a href="#">2019-10-10</a></div>
        <div class="content">
            <div class="com">
                急啊v看额外基本无办法 让未来如何和未来放了我阿飞起来热舞了缺乏发发呢缺乏你份额能让你恶人额外人认为你认为
            </div>
            <div class="foot">
                <div class="iconfont icon-zanpress"><span>112</span></div>
                <div class="iconfont icon-wechat"><span>微信</span></div>
            </div>
        </div>
        <div class="ties">精彩跟贴</div>
        <div class="tie">
            <div class="me clearfix">
                <img src="../../public/images/2.jpg" alt="">
                <div class="name">
                    <p class="wang">火星网友1</p>
                    <span>2小时前</span>
                </div>
                <a href="#">回复</a>
            </div>
            <p>文章说的很由道理!</p>
        </div>
        <div class="footer">
            <div class="btn">
                <button>更多跟帖</button>
            </div>
            <div class="xie">
                <input type="text" placeholder="写跟帖">
                <div class="ico">
                    <span class="iconfont icon-pinglun"></span>
                    <span class="iconfont icon-shoucang"></span>
                    <span class="iconfont icon-fenxiang1"></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
@import url('http://at.alicdn.com/t/font_1742706_hlbqgw3iokv.css');
* {
    margin: 0;
    padding: 0;
}
.box {
    width: 100vw;
    .head {
        display: flex;
        justify-content: space-between;
        height: 46/6.4vh;
        padding: 0 20/3.6vw;
        .left {
            display: flex;
            .iconfont {
                height: 46/6.4vh;
                line-height: 46/6.4vh;
                font-size: 28/3.6vw;
            }
            .icon-xiala-copy {
                font-size: 22/3.6vw;
            }
        }
        .right {
            width: 78/6.4vh;
            height: 30/6.4vh;
            line-height: 30/6.4vh;
            text-align: center;
            margin-top: 8/6.4vh;
            border: 1/3.6vw solid #ccc;
            border-radius: 23/6.4vh;
            font-size: 10/3.6vw;
        }
    }
    .title {
        padding: 0 20/3.6vw;
        margin: 10/3.6vw 0 5/3.6vw 0;
        font-size: 16/3.6vw;
    }
    .bao {
        padding: 0 20/3.6vw;
        font-size: 14/3.6vw;
        color: rgb(164, 164, 164);
        a {
            display: inline-block;
            margin-left: 12/3.6vw;
            color: rgb(164, 164, 164);
        }
    }
    .content {
        padding-bottom: 20/3.6vw;
        border-bottom: 5/3.6vw solid #e4e4e4;
        margin-top: 24/6.4vh;
        .com {
            padding: 0 20/3.6vw;
            height: 200/6.4vh;
            font-size: 16/3.6vw;
            line-height: 38/6.4vh;
        }
        .foot {
            width: 240/3.6vw;
            margin: auto;
            
            display: flex;
            justify-content: space-between;
            .iconfont {
                width: 90/3.6vw;
                height: 30/3.6vw;
                line-height: 30/3.6vw;
                text-align: center;
                border: 1/3.6vw solid #ccc;
                border-radius: 15/3.6vw;
                font-size: 18/3.6vw;
                &::before {
                    display: inline-block;
                    margin-right: 5/3.6vw;
                }
                span {
                    font-size: 14/3.6vw;
                    color: rgb(92, 92, 92);
                }
            }
            .icon-wechat {
                color: #0f0;
            }
        }
    }
    .ties {
        height: 50/6.4vh;
        line-height: 50/6.4vh;
        text-align: center;
        font-size: 18/3.6vw;
    }
    .tie {
        width: 100%;
        padding: 0 20/3.6vw;
        border-bottom: 5/3.6vw solid #e4e4e4;
        img {
            display: block;
            float: left;
            width: 50/3.6vw;
            height:50/3.64vw;
            margin: 25/6.4vh 10/3.6vw 25/6.4vh 0;
            border-radius: 50%;
        }
        .name {
            float: left;
            margin-top: 25/6.4vh;
            font-size: 16/3.6vw;
            .wang {
                margin-bottom: 10/6.4vh;
                font-size: 16/3.6vw;
            }
        }
        a {
            float: right;
            height: 100/6.4vh;
            line-height: 100/6.4vh;
            font-size: 14/3.6vw;
        }
        p {
            font-size: 12/3.6vw;
            line-height: 20/3.6vw;
            margin-bottom: 12/3.6vw;
        }
    }
    .footer {
        padding: 0 20/3.6vw;
        .btn {
            margin: 20/3.6vw 0;
            text-align: center;
            button {
                width: 100/3.6vw;
                height: 30/3.6vw;
                border-radius: 15/3.6vw;
                outline: none;
                font-size: 10/3.6vw;
            }   
        }
        .xie {
            display: flex;
            justify-content: space-between;
            input {
                widows: 180/3.6vw;
                height: 40/6.4vh;
                border: none;
                outline: none;
                border-radius: 20/6.4vh;
                background-color: rgb(215, 215, 215);
                font-size: 14/3.6vw;
                text-indent: 20/3.6vw;
            }
            .ico {
                display: flex;
                justify-content: space-between;
                width: 120/3.6vw;
                span {
                    font-size: 24/3.6vw;
                    height: 40/6.4vh;
                    line-height: 40/6.4vh;
                }
            }
        }
        
    }
}

</style>